/** @type {import('tailwindcss').Config} */
export default {
	// 使用 "class" 模式时，Tailwind 会将 "dark" 类添加到根元素（通常是 <body> 元素）上，以指示页面当前处于深色模式
	darkMode: "class",
	// 通过配置 content，Tailwind CSS 将会检索和构建包含需要的 CSS 样式的文件，并生成最终的 CSS 输出文件
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		screens: {
			xs: "480px",
			sm: "576px",
			md: "768px",
			lg: "992px",
			xl: "1200px",
			"2xl": "1600px",
		},
		colors: {
			black: "#000000",
			white: "#FFFFFF",
			transparent: "transparent",
			current: "currentColor",

			primary: {
				light: "#E3F2FD",
				DEFAULT: "#2196F3",
				dark: "#1E88E5",
			},
			success: {
				light: "#E8F5E9",
				DEFAULT: "#4CAF50",
				dark: "#43A047",
			},
			warning: {
				light: "#FFF3E0",
				DEFAULT: "#FF9800",
				dark: "#FB8C00",
			},
			error: {
				light: "#FBE9E7",
				DEFAULT: "#FF5252",
				dark: "#D32F2F",
			},
			info: {
				light: "#E8F5E9",
				DEFAULT: "#00B8D9",
				dark: "#43A047",
			},

			blue: {
				light: "#E3F2FD",
				DEFAULT: "#2196F3",
				dark: "#1E88E5",
			},
			green: {
				light: "#E8F5E9",
				DEFAULT: "#4CAF50",
				dark: "#43A047",
			},
			purple: {
				light: "#F3E5F5",
				DEFAULT: "#9C27B0",
				dark: "#8E24AA",
			},
			orange: {
				light: "#FFF3E0",
				DEFAULT: "#FF9800",
				dark: "#FB8C00",
			},
			pink: {
				light: "#FFC5C5",
				DEFAULT: "#FF49DB",
				dark: "#FF33CC",
			},
			yellow: {
				light: "#FFFFC5",
				DEFAULT: "#FFC82C",
				dark: "#FFB300",
			},
			code: {
				light: "#F7F7F7",
				DEFAULT: "#D63384",
				dark: "#C51077",
			},

			gray: {
				50: "#FAFAFA",
				100: "#F5F5F5",
				200: "#EEEEEE",
				300: "#E0E0E0",
				400: "#BDBDBD",
				500: "#9E9E9E",
				600: "#757575",
				700: "#616161",
				800: "#424242",
				900: "#212121",
			},
			hover: {
				light: "#F7F7F7",
				DEFAULT: "#63738114",
				dark: "#4F4F4F14",
			},
		},
		extend: {
			transitionProperty: {
				height: "height",
			},
			animation: {
				"spin-slow": "spin 8s linear infinite",
			},
		},
	},
	corePlugins: {
		// Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
		preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
	},
	plugins: [],
};
